<template>
  <div>
    <more-header :title="title"></more-header>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-row class="content-list">
        <van-col v-for="(item, index) in list" :key="index" class="list-child" span="11">
          <img :src="item.handcover" alt="" @click="courseDetail(item.id)">
          <span>{{item.courseName}}</span>
          <span style="color: #ff4444">￥{{item.price}}</span>
        </van-col>
      </van-row>
    </van-list>
  </div>
</template>

<script>
  import MoreHeader from '_c/more-header'
  export default {
    name: 'more-class',
    components: {
      MoreHeader
    },
    data() {
      return {
        title: '',
        list: [],
        loading: false,
        finished: false,
        pageSize: 2,
        pageNumber: 1
      }
    },
    mounted() {
      this.$route.query.type === 'small' ? this.title = '小班课' : this.$route.query.type === 'point' ? this.title = '点播课程' : this.title = '直播课程'
    },
    methods: {
      onLoad() {
        if (this.title === '小班课') {
          this.ClassCourse('/api/api/student/course/page', 1, 2)
        } else if (this.title === '点播课程') {
          this.ClassCourse('/api/api/student/course/page', 2)
        } else {
          this.ClassCourse('/api/api/student/course/page', 1, 1)
        }
      },
      ClassCourse(url, courseType, liveType) {
        let params = {
          size: this.pageSize,
          number: this.pageNumber,
          courseType: courseType,
          liveType: liveType
        }
        this.$get(url, params).then((res) => {
          if (res.code === 0) {
            res.data.forEach((item) => {
              this.list.push(item)
            })
            this.pageNumber++
            this.loading = false
            if (res.data.length < this.pageSize) {
              this.finished = true
              this.pageNumber = 1
            }
          }
        })
      },
      courseDetail(id) {
        let types = this.title === '小班课' ? 2 : this.title === '点播课程' ? 0 : 1
        this.$router.push({path: '/index/course-detail', query: {id: id, type: types}})
      }
    }
  }
</script>

<style scoped>
  .content-list{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 10px 20px;
  }
  .list-child{
    height: 360px;
    display: flex;
    margin: 12px;
    flex-direction: column;
  }
  .list-child img{
    width: 100%;
    height: 260px;
    border-radius: 15px;
  }
</style>
